<template>
  <div class="lb-color-list" v-if="colorList.length > 0">
    <top-nav />
    <div class="page-main">
      <div class="flex-warp">
        <div class="mt-md ml-lg mr-lg">当前配色方案：</div>
        <div class="flex-1">
          <div class="flex-warp">
            <div v-for="(item, index) in colorList" :key="index">
              <div
                @click="changeIndex(index)"
                class="color-item"
                :class="[{ active: index === colorInd }]"
                v-if="index < colorLen - 1"
              >
                <div class="flex-center">
                  <div
                    class="primaryColor"
                    :style="{ background: item.primaryColor }"
                  ></div>
                  <div
                    class="subColor"
                    :style="{ background: item.subColor }"
                  ></div>
                </div>
                <i
                  class="iconfont icongouxuan-xuanzhong-yuankuang flex-center"
                  v-if="index === colorInd"
                ></i>
              </div>
            </div>
            <div
              @click="changeIndex(colorLen - 1)"
              class="color-item"
              :class="[{ active: colorInd === colorLen - 1 }]"
              style="width: auto; padding: 0 2px"
            >
              <div class="flex-center" style="margin-top: 4px">
                <el-color-picker
                  size="medium"
                  style="margin-right: 4px"
                  v-model="colorList[colorLen - 1].primaryColor"
                ></el-color-picker>
                <el-color-picker
                  size="medium"
                  v-model="colorList[colorLen - 1].subColor"
                ></el-color-picker>
              </div>
              <div class="flex-y-center" style="height: 18px; margin-top: 4px">
                <div style="line-height: 18px; font-size: 10px">自定义配色</div>
                <i
                  class="
                    iconfont
                    icongouxuan-weixuanzhong-xianxingyuankuang
                    flex-center
                  "
                  :class="[
                    {
                      'icongouxuan-xuanzhong-yuankuang':
                        colorInd === colorLen - 1
                    }
                  ]"
                  style="margin: 0"
                ></i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="space-lg"></div>
      <div class="space-lg"></div>
      <div class="space-lg"></div>
      <div class="flex-warp">
        <div class="ml-lg mr-lg">当前风格示例：</div>
        <div class="flex-1 flex-y-center">
          <div class="color-page fill-body rel">
            <img class="navbar-img abs" :src="navbar" />
            <img class="banner-img" :src="banner" />
            <div class="info pd-md fill-base">
              <div class="f-paragraph c-title title">
                当前风格示例当前风格示例当风格示例当前风格示例
              </div>
              <div class="flex-y-center">
                <div class="price mr-sm">¥45</div>
                <div class="c-caption sale-data">浏览666 已销售288</div>
              </div>
            </div>
            <div
              class="flex-center fill-base mt-md mb-md pl-md pr-md radius-10"
              style="height: 40px; font-size: 13px"
            >
              <div class="c-caption mr-md">选择</div>
              <div class="flex-1 flex-between">
                规格类型
                <i class="iconfont iconright f-icontext"></i>
              </div>
            </div>
            <div
              class="flex-center fill-base mt-md mb-md pl-md pr-md radius-10"
              style="height: 40px; font-size: 13px"
            >
              <div class="c-title flex-1">基本参数</div>
            </div>
            <div class="footer flex-warp abs">
              <div class="icon-box fill-base">
                <!-- <div class="flex-center">
                  <img class="avatar-img circle" :src="banner" />
                </div> -->
                <i class="iconfont iconkefu flex-center"></i>
                <div class="text flex-center">客服</div>
              </div>
              <div class="icon-box fill-base">
                <i class="iconfont icon_cart_1 flex-center"></i>
                <div class="text flex-center">购物车</div>
              </div>
              <div class="footer-right flex-between c-base">
                <div
                  class="pay-btn flex-center"
                  :style="{ background: colorList[colorInd].subColor }"
                >
                  加入购物车
                </div>
                <div
                  class="pay-btn flex-center"
                  :style="{ background: colorList[colorInd].primaryColor }"
                >
                  立即购买
                </div>
              </div>
            </div>
          </div>
          <div class="color-page fill-body ml-lg mr-lg rel">
            <img class="navbar-img abs" :src="navbar" />
            <img class="banner-img" :src="banner" />
            <div class="bg abs"></div>
            <div class="spec-box abs fill-base">
              <div class="flex-center pd-lg fill-base b-1px-b">
                <img class="goods-img radius-10 mr-md" :src="banner" />
                <div class="flex-1">
                  <div class="space-lg"></div>
                  <div class="mt-md" style="color: #e02e24">¥42</div>
                  <div class="f-caption c-caption">库存：230件</div>
                </div>
              </div>
              <div
                class="spec-item pd-lg b-1px-b"
                v-for="(item, index) in specList"
                :key="index"
              >
                <div class="title f-caption c-paragraph mb-sm">
                  {{ item.title }}
                </div>
                <div class="flex-warp">
                  <div
                    class="item-child flex-center mr-md"
                    :class="[
                      {
                        'flex-y-center': item.is_img === 1,
                        'c-base': cindex === 0
                      }
                    ]"
                    :style="{
                      background:
                        cindex === 0
                          ? colorList[colorInd].primaryColor
                          : '#f4f6f8'
                    }"
                    v-for="(citem, cindex) in item.list"
                    :key="cindex"
                  >
                    <img
                      class="spec-img mr-sm"
                      :src="banner"
                      v-if="item.is_img === 1"
                    />
                    {{ citem.title }}
                  </div>
                </div>
              </div>
              <div class="flex-between pd-lg b-1px-b">
                <div class="f-caption c-caption">
                  <div>限购4件，您已购2件</div>
                  <div>2件起购</div>
                </div>
                <div class="add-tag c-title flex-y-center">
                  <div class="btn flex-center">-</div>
                  <div class="btn flex-center ml-sm mr-sm" style="width: 40px">
                    2
                  </div>
                  <div class="btn flex-center">+</div>
                </div>
              </div>
              <div class="pd-lg f-caption c-title text-right">合计：84元</div>
              <div class="footer-right flex-between c-base">
                <div
                  class="pay-btn flex-center"
                  :style="{ background: colorList[colorInd].subColor }"
                >
                  加入购物车
                </div>
                <div
                  class="pay-btn flex-center"
                  :style="{ background: colorList[colorInd].primaryColor }"
                >
                  立即购买
                </div>
              </div>
            </div>
          </div>
          <div class="color-page fill-body rel">
            <img class="navbar-img abs" style="height: 54px" :src="navbar2" />
            <div style="height: 54px"></div>
            <div
              class="pd-lg c-base"
              :style="{ background: colorList[colorInd].primaryColor }"
            >
              <div>等待买家付款</div>
              <div class="f-icontext mt-sm">
                请在4小时54分54秒内完成支付，逾期未支付，订单将自动取消
              </div>
            </div>
            <div class="fill-base pl-md pr-md pt-lg pb-lg flex-center">
              <i class="iconfont iconmap f-big-title mr-md"></i>
              <div class="flex-1 flex-between">
                <div>
                  <div class="c-paragraph">
                    四川省 成都市 武侯区 益州大道中段
                  </div>
                  <div class="f-caption c-caption">罗先生 182****1374</div>
                </div>
                <i class="iconfont iconright f-icontext"></i>
              </div>
            </div>
            <div class="space-md"></div>
            <div
              class="flex-center pd-lg fill-base"
              :class="[{ 'b-1px-t': index !== 0 }]"
              v-for="(item, index) in 2"
              :key="index"
            >
              <img class="goods-img radius-10 mr-md" :src="banner" />
              <div>
                <div class="f-paragraph c-title ellipsis-2">
                  商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题
                </div>
                <div class="flex-between mt-lg">
                  <div style="color: #e02e24">¥42</div>
                  <div class="f-caption c-caption">x1 件</div>
                </div>
              </div>
            </div>
            <div class="footer order abs flex-warp c-paragraph fill-base">
              <div class="pay-btn flex-center">更多商品</div>
              <div class="pay-btn flex-center">取消订单</div>
              <div
                class="pay-btn flex-center c-base"
                :style="{ background: colorList[colorInd].primaryColor }"
              >
                继续支付
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="space-lg"></div>
    </div>

    <div class="flex-center pd-lg b-1px-t">
      <el-button
        class="mr-md"
        type="primary"
        :plain="true"
        @click="getSystemDefaulDiy"
        >{{ $t('action.defaultSet') }}</el-button
      >
      <el-button type="primary" @click="submit">保存</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      navbar:
        'https://lbqny.migugu.com/admin/diy/navbar_white.png',
      navbar2: 'https://lbqny.migugu.com/admin/diy/navbar.jpg',
      banner:
        'https://card-1253902191.cos.ap-chengdu.myqcloud.com/image/8895/20/05/2c98a7849fdd11ea8f814b770d10da8d.jpg',
      colorList: [{
        primaryColor: '#19c865',
        subColor: '#f86c53'
      }, {
        primaryColor: '#db4d4d',
        subColor: '#e28e5f'
      }, {
        primaryColor: '#dd6630',
        subColor: '#e39a32'
      }, {
        primaryColor: '#ebcc3b',
        subColor: '#20252d'
      }, {
        primaryColor: '#8ac4aa',
        subColor: '#232826'
      }, {
        primaryColor: '#8228f9',
        subColor: '#b49fe2'
      }, {
        primaryColor: '#ca2432',
        subColor: '#efd645'
      }, {
        primaryColor: '#db4d4d',
        subColor: '#555555'
      }, {
        primaryColor: '#85c077',
        subColor: '#b1dda7'
      }, {
        primaryColor: '#baaa6f',
        subColor: '#dcd5a9'
      }],
      primaryColor: '#19c865',
      subColor: '#f86c53',
      colorInd: 0,
      colorLen: 0,
      specList: [
        {
          title: '颜色',
          is_img: 1,
          list: [
            {
              title: '秘银'
            },
            {
              title: '绯云'
            }
          ]
        },
        {
          title: '发货仓',
          is_img: 0,
          list: [
            {
              title: '成都仓'
            },
            {
              title: '北京仓'
            },
            {
              title: '上海仓'
            },
            {
              title: '香港仓'
            }
          ]
        }
      ]
    }
  },
  created () {
    this.getDiyColorList()
  },
  activated () {
  },
  methods: {
    async changeIndex (index) {
      this.colorInd = index
    },
    async getDiyColorList () {
      let { data } = await this.$api.diyGetDiyColor()
      if (data.length < 1) {
        data = this.colorList
      }

      let { data: curData } = await this.$api.diyUseringColor()

      let { primaryColor, subColor } = curData
      data.push({
        primaryColor,
        subColor
      })
      this.colorList = data
      this.colorLen = data.length
      let ind = -1
      data.map((item, index) => {
        if (item.primaryColor === primaryColor && item.subColor === subColor) {
          ind = index
        }
      })
      this.colorInd = ind === -1 ? data.length - 1 : ind
    },
    async getSystemDefaulDiy () {
      this.colorInd = 0
      await this.submit()
    },
    async submit () {
      let param = this.colorList[this.colorInd]
      let { code } = await this.$api.diySaveDiyColor(param)
      if (code !== 200) return
      this.$message.success(this.$t('tips.successSave'))
    }
  }
}
</script>

<style lang="scss" scoped>
.color-item {
  width: 84px;
  height: 68px;
  margin: 10px 10px 0 0;
  padding-top: 2px;
  border: 1px solid white;
  cursor: pointer;
  .iconfont {
    color: #429dff;
    margin-top: 5px;
  }
}
.color-item.active {
  border: 1px solid #429dff;
  border-radius: 5px;
  box-shadow: 0px 4px 12px 1px rgba(66, 157, 255, 0.15);
}
.primaryColor,
.subColor {
  width: 40px;
  height: 40px;
  border-radius: 5px 0 0 5px;
}
.subColor {
  border-radius: 0 5px 5px 0;
}
.color-page {
  width: 300px;
  height: 535px;
  overflow: hidden;
  border-radius: 5px;
  border: 1px solid #eee;
  .navbar-img {
    width: 300px;
    height: 52px;
  }
  .banner-img {
    width: 300px;
    height: 300px;
    display: block;
  }
  .goods-img {
    width: 70px;
    height: 70px;
  }
  .info {
    border-radius: 0 0 10px 10px;
    .title {
      font-size: 14px;
    }
    .price {
      font-size: 18px;
      color: #e02e24;
    }
    .sale-data {
      font-size: 9px;
    }
  }
  .footer {
    width: 100%;
    height: 40px;
    line-height: 40px;
    bottom: 0;
    .icon-box {
      width: 15%;
      height: 40px;
      .avatar-img {
        width: 16px;
        height: 16px;
        margin: 5px 0 2px 0;
      }
      .iconfont {
        font-size: 16px;
        line-height: 12px;
        padding: 8px 0 3px 0;
      }
      .text {
        font-size: 10px;
        line-height: 16px;
      }
    }
    .footer-right {
      width: 70%;
      .pay-btn {
        width: 50%;
      }
    }
  }
  .bg {
    width: 300px;
    height: 535px;
    background: rgba(0, 0, 0, 0.2);
    top: 0;
  }
  .spec-box {
    width: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    .title {
      height: 20px;
      line-height: 20px;
    }
    .item-child {
      height: 25px;
      padding: 0 10px;
      border-radius: 3px;
      font-size: 9px;
      .spec-img {
        width: 16px;
        height: 16px;
        border-radius: 3px;
      }
    }
    .add-tag {
      .btn {
        width: 22px;
        height: 22px;
        border-radius: 3px;
        background: #f4f6f8;
      }
    }
    .pay-btn {
      width: 50%;
      height: 40px;
    }
  }
  .footer.order {
    width: 100%;
    .pay-btn {
      width: 33.3%;
    }
  }
}
</style>
